<template>
  <div class="page page-otc">
    <publish-post-header />
    <div class="page-space"></div>
    <div class="tabPanel maimai">
      <ul>
        <li
          v-for="(item, index) in tabList"
          :key="item.text"
          :class="{ hit: item.active }"
          @click="switchTab(index)"
        >
          {{ item.text }}
        </li>
      </ul>
      <div class="panes">
        <div class="pane">
          <div class="buybuy">
            <publish-post-coin-info />
            <publish-post-form @change="updateForm" />
            <publish-post-payment @updatePayment="updatePayment"/>
            <div class="zhifu">
              <div class="xiadan" :class="{disabled: loading}" @click="handleSubmit">发布广告</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import publishPostHeader from '@/components/partials/otc/publish-post/Header'
import publishPostCoinInfo from '@/components/partials/otc/publish-post/CoinInfo'
import publishPostForm from '@/components/partials/otc/publish-post/Form'
import publishPostPayment from '@/components/partials/otc/publish-post/Payment'
import { isNumber } from '@/utils/validate'
export default {
  components: { publishPostHeader, publishPostCoinInfo, publishPostForm, publishPostPayment },
  data () {
    return {
      tabList: [
        {
          text: '买',
          side: 2,
          active: true
        },
        {
          text: '卖',
          side: 1,
          active: false
        }
      ],
      activeIndex: 0,

      loading: false,
      form: {},
      payment: {},
      errmsg: ''
    }
  },
  computed: {
    ...mapState({
      money: ({ otc }) => otc.money
    }),
    side () {
      return this.tabList[this.activeIndex].side
    }
  },
  methods: {
    ...mapActions({
      publishInfo: 'otc/publishInfo'
    }),
    switchTab (index) {
      this.tabList[this.activeIndex].active = false
      this.tabList[index].active = true
      this.activeIndex = index
    },
    handleSubmit () {
      if (this.loading) { return }
      do {
        if (!isNumber(this.form.price) || !isNumber(this.form.minNum || !isNumber(this.form.maxNum))) {
          this.errmsg = '输入价格或数量格式错误'
          break
        }
        if (this.form.price < 0 || this.form.minNum < 0 || this.form.maxNum < 0) {
          this.errmsg = '输入价格或数量格式错误'
          break
        }
        if (!(this.form.maxNum > this.form.minNum)) {
          this.errmsg = '最大量必须大于最小量'
          break
        }
      } while (false)

      this.$toast.show('确定要发布？', {
        action: {
          text: '确定',
          onClick: () => {
            const payload = {
              coin_name: this.money,
              side: this.side,
              price_usd: this.form.price,
              min_num: this.form.minNum,
              max_num: this.form.maxNum,
              note: this.form.note,
              ...this.payment
            }
            const succeed = () => {
              this.$toast.success('发布成功')
              this.$router.replace('/otc/publish-list')
            }
            const failed = (error) => {
              this.$toast.error(error.message)
            }
            this.loading = true
            this.publishInfo(payload)
              .then(succeed)
              .catch(failed)
              .finally(() => (this.loading = false))
          }
        }
      })
    },
    updatePayment (payment) {
      this.payment = payment
    },
    updateForm (form) {
      this.form = { ...form }
    }
  }
}
</script>
<style scoped>
.disabled {
  opacity: 0.8;
}
.page-otc{
  padding-top: 50px;
}
</style>
